import React, { Component } from "react";
import PubSub from "pubsub-js";
import "./index.css";

export default class List extends Component {
  state = {
    users: [], //初始化状态,users初始值为数组
    isFirst: true, //是否为第一次打开页面
    isLoading: false, //标识是否处于加载中
    err: "", //存储请求错误的相关信息,
  };

  //初始化操作:定时器,消息发布与订阅
  componentDidMount() {
    //接受数据在这里订阅消息
    //不想写参数就写_占位
    //这里的msg就是
    this.token = PubSub.subscribe("updateSate", (msg, stateObj) => {
      //这里就是和state里面的数据进行对比，相同的key就会替换
      this.setState(stateObj);
    });
  }

  //组件即将被销毁时
  componentWillUnmount() {
    //取消消息发布与订阅
    PubSub.unsubscribe(this.token);
  }

  render() {
    const { users, isFirst, isLoading, err } = this.state;
    return (
      <div className="row">
        {isFirst ? (
          <h2>欢迎使用github搜索，请输入关键字</h2>
        ) : isLoading ? (
          <h2>Loading...</h2>
        ) : err ? (
          <h2>{err}</h2>
        ) : users.length == 0 ? (
          <h2> 暂无数据</h2>
        ) : (
          users.map((item) => {
            return (
              <div key={item.id} className="card">
                <a href={item.html_url} target="_blank">
                  <img src={item.avatar_url} style={{ width: "100px" }} />
                </a>
                <p className="card-text">{item.login}</p>
              </div>
            );
          })
        )}
      </div>
    );
  }
}
